<template>
  <div class="data-serve-api-page">
    <div class="header bg f-c">
      <div class="nav-box f-s">
        <div class="header-content">
          <Navbar />
        </div>
      </div>
    </div>
    <div class="content">
      <el-card shadow="none">
        <h2>基本信息</h2>
        <div class="ctable-box">
          <table>
            <tr v-for="(row,rowIndex) in rowList" :key="rowIndex">
              <td
                v-for="(col,colIndex) in row"
                :key="colIndex"
                :class="[colIndex % 2 === 1 ? 'table_td' : 'tool_baco']"
                :colspan="col.colspan"
              >{{ col.name }}</td>
            </tr>
          </table>
        </div>
        <div class="ctable-box">
          <table style="margin-top: 60px">
            <tr>
              <td class="tool_baco" colspan="1" style="padding-left: 85px;text-align: left">附件类型</td>
              <td colspan="1" class="tool_baco" style="padding-left: 85px;text-align: left">
                附件名称
              </td>
            </tr>
            <tr v-for="(item,index) in detail.files" :key="index">
              <td class="table_td" style="padding-left: 85px;text-align: left">{{ item.name }}</td>
              <td class="table_td" style="padding-left: 85px;text-align: left">
                <el-link>
                  <a :href="item.path" />
                </el-link>
              </td>
            </tr>
          </table>
        </div>
      </el-card>
      <el-card shadow="none">
        <h2>申请信息</h2>
        <el-form ref="subForm" label-position="top" :model="ruleForm" :rules="rules">
          <el-row :gutter="64">
            <el-col :span="12">
              <el-form-item label="申请方式：">
                <el-input value="订阅" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请人：">
                <el-input disabled :value="userInfo.nickname" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="64">
            <el-col :span="12">
              <el-form-item label="申请部门：">
                <el-input disabled :value="userInfo.deptName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请方联系方式：">
                <el-input disabled :value="userInfo.phone" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="64">
            <el-col :span="12">
              <el-form-item label="申请方地址：">
                <el-input disabled :value="userInfo.address" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="应用系统：" prop="applicationSystems">
                <el-select v-model="ruleForm.applicationSystems" multiple>
                  <el-option v-for="item in relation_system" :value="item.code" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="64">
            <el-col :span="12">
              <el-form-item label="业务用途：" prop="businessPurpose">
                <el-input v-model="ruleForm.businessPurpose" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预期应用成效：" prop="expectApplicationEffect">
                <el-input v-model="ruleForm.expectApplicationEffect" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="64">
            <el-col :span="12">
              <el-form-item label="接受库：" prop="receiveDatabase">
                <el-input v-model="ruleForm.receiveDatabase" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="64">
                <el-col :span="12">
                  <el-row :gutter="64">
                    <el-col :span="12">
                      <el-form-item label="数据更新频率：" prop="updateFreqNum">
                        <el-input v-model="ruleForm.updateFreqNum" type="number" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="单位" prop="updateFreq">
                        <el-select v-model="ruleForm.updateFreq">
                          <el-option v-for="item in updateFreqList" :value="item.code" :label="item.name" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="使用截止日期：" prop="useEndTime">
                    <el-date-picker v-model="ruleForm.useEndTime" value-format="yyyy-MM-dd hh:mm:ss" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="申请原因：" prop="reason">
                <el-input v-model="ruleForm.reason" type="textarea" resize="none" :rows="5" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="附件上传" prop="file">
              <DragUpload ref="dragRef" />
              <div class="upload-tips">请上传申请单盖章扫描件，<em>点击此处</em>可下载申请单模版</div>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="none">
        <h2>申请指标</h2>
        <div class="table-box" style="margin-bottom: 70px">
          <el-table
            ref="multipleTable"
            border
            :data="fieldList"
            @selection-change="onSelect"
          >
            <el-table-column type="selection" width="50px" />
            <el-table-column prop="name" label="指标名称" />
            <el-table-column prop="code" label="英文名称" />
            <el-table-column prop="pk" label="主键">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.pk" />
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type">
                  <el-option
                    v-for="item in api_param_data_type"
                    :key="item.code"
                    :value="item.code"
                    :label="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 100%;text-align: center">
          <el-button type="primary" style="margin-right: 200px" @click="handleSubmit">确认提交</el-button>
          <el-button @click="handleBack">返回</el-button>
        </div>
      </el-card>
    </div>
    <div class="footer">
      <div class="db-container">
        <div class="footer-item">
          <div class="footer-text">主板：xxx市政务服务数据管理局</div>
          <div class="footer-text">技术支持单位：xxx市大数据资源管理中心</div>
          <div class="footer-text">运营：xxx市XXXX科技发展集团有限公司</div>
        </div>
        <div class="footer-item" style="justify-content: center">
          <div class="footer-text">粵ICP备10001213213号码-7</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '../layout/navbar'
import { mapGetters } from 'vuex'
import { http_serve_publish_data, http_serve_sub_server, http_shop_server } from '@/api'
import { dict_openTypeList, dict_shareNatureList, dict_shareTypeList } from '@/dict'
export default {
  name: 'Index',
  computed: {
    ...mapGetters(['userInfo', 'dict']),
    updateFreqList() {
      return this.dict['update_frequency'] || []
    },
    relation_system() {
      return this.dict['relation_system'] || []
    },
    resource_attribute_type() {
      return this.dict['resource_attribute_type'] || []
    },
    resource_storage_format() {
      return this.dict['resource_storage_format'] || []
    },
    resource_tag() {
      return this.dict['resource_tag'] || []
    },
    data_range() {
      return this.dict['data_range'] || []
    },
    data_classification() {
      return this.dict['data_classification'] || []
    },
    application_scenario() {
      return this.dict['application_scenario'] || []
    },
    provide_channels() {
      return this.dict['provide_channels'] || []
    },
    realm() {
      return this.dict['realm'] || []
    },
    update_frequency() {
      return this.dict['update_frequency'] || []
    },
    provincial_platform_matters() {
      return this.dict['provincial_platform_matters'] || []
    },
    city_platform_matters() {
      return this.dict['city_platform_matters'] || []
    },
    api_param_data_type() {
      return this.dict['api_param_data_type'] || []
    }
  },
  components: {
    Navbar
  },
  data() {
    return {
      safetyArea: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      requiredLicense: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      needDispatch: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      shareNatureList: dict_shareNatureList,
      reportProvince: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      openTypeList: dict_openTypeList,
      openCondition: [
        { value: true, name: '全部开放' },
        { value: false, name: '部分开放' }
      ],
      shareTypeList: dict_shareTypeList,
      ruleForm: {
        applicationSystems: [],
        businessPurpose: '',
        expectApplicationEffect: '',
        useEndTime: '',
        reason: '',
        receiveDatabase: '',
        updateFreq: '',
        updateFreqNum: ''
      },
      fieldList: [],
      fieldCodes: [],
      rules: {
        applicationSystems: [{ required: true, message: '不能为空' }],
        businessPurpose: [{ required: true, message: '不能为空' }],
        expectApplicationEffect: [{ required: true, message: '不能为空' }],
        receiveDatabase: [{ required: true, message: '不能为空' }],
        updateFreq: [{ required: true, message: '不能为空' }],
        updateFreqNum: [{ required: true, message: '不能为空' }],
        useEndTime: [{ required: true, message: '不能为空' }],
        reason: [{ required: true, message: '不能为空' }]
      },
      optionIds: [],
      detail: {},
      rowList: []
    }
  },
  async created() {
    const res = await http_serve_publish_data.read({ id: this.$route.params.id })
    const data = res || {}
    if (!data.files) {
      data.files = []
    }
    this.detail = data
    if (res.type === 'database') {
      this.rowList = [
        [
          { name: '资源名称', colspan: '1' },
          { name: res.name, colspan: '1' },
          { name: '资源属性分类', colspan: '1' },
          { name: this.getName(this.resource_attribute_type, res.attributeType), colspan: '1' }
        ],
        [
          { name: '资源类型', colspan: '1' },
          { name: res.type === 'database' ? '库表' : '接口', colspan: '3' }
        ],
        [
          { name: '资源介绍', colspan: '1' },
          { name: res.itselfDesc, colspan: '3' }
        ],
        [
          { name: '资源存储格式', colspan: '1' },
          { name: '资源存储格式', colspan: '3' }
        ],
        [
          { name: '资源标签', colspan: '1' },
          { name: res.labels, colspan: '3' }
        ],
        [
          { name: '单位', colspan: '1' },
          { name: res.ownerInfo.org, colspan: '1' },
          { name: '联系人', colspan: '1' },
          { name: res.ownerInfo.name, colspan: '1' }
        ],
        [
          { name: '联系方式', colspan: '1' },
          { name: res.ownerInfo.phone, colspan: '1' },
          { name: '邮件', colspan: '1' },
          { name: res.ownerInfo.email, colspan: '1' }
        ],
        [
          { name: '关联系统', colspan: '1' },
          { name: this.getName(this.relation_system, res.cohereSystem, true), colspan: '3' }
        ],
        [
          { name: '更新频率', colspan: '1' },
          { name: this.getName(this.update_frequency, res.updateFreq), colspan: '1' },
          { name: '安全区开放', colspan: '1' },
          { name: res.safetyArea ? '是' : '否', colspan: '1' }
        ],
        [

          { name: '开放类型', colspan: '1' },
          { name: this.getName(this.openTypeList, res.openType), colspan: '1' },
          { name: '开放条件', colspan: '1' },
          { name: this.getName(this.openCondition, res.openCondition), colspan: '1' }
        ],
        [
          { name: '共享类型', colspan: '1' },
          { name: this.getName(this.shareTypeList, res.shareType), colspan: '1' },
          { name: '是否上报省平台', colspan: '1' },
          { name: res.reportProvince ? '是' : '否', colspan: '1' }
        ],
        [
          { name: '时间范围', colspan: '1' },
          { name: res.timeRangeStart + '-' + res.timeRangeEnd, colspan: '3' }
        ],
        [
          { name: '数据范围', colspan: '1' },
          { name: this.getName(this.data_range, res.dataRange), colspan: '3' }
        ],
        [
          { name: '数据分级', colspan: '1' },
          { name: this.getName(this.data_classification, res.dataClassification), colspan: '3' }
        ],
        [
          { name: '应用场景', colspan: '1' },
          { name: this.getName(this.application_scenario, res.applicationScenario), colspan: '1' },
          { name: '提供渠道', colspan: '1' },
          { name: this.getName(this.provide_channels, res.provideChannels), colspan: '1' }
        ],
        [
          { name: '所属区域', colspan: '1' },
          { name: this.getName(this.realm, res.realm), colspan: '1' },
          { name: '电子证件照', colspan: '1' },
          { name: this.getName(this.requiredLicense, res.requiredLicense), colspan: '1' }
        ],
        [
          { name: '生成目录性质', colspan: '1' },
          { name: this.getName(this.shareNatureList, res.shareNature), colspan: '3' }
        ]
      ]
    } else if (res.type === 'api') {
      this.rowList = [
        [
          { name: '资源名称', colspan: '1' },
          { name: res.name, colspan: '1' },
          { name: '资源属性分类', colspan: '1' },
          { name: this.getName(this.resource_attribute_type, res.attributeType), colspan: '1' }
        ],
        [
          { name: '资源类型', colspan: '1' },
          { name: res.type === 'database' ? '库表' : '接口', colspan: '3' }
        ],
        [
          { name: '资源介绍', colspan: '1' },
          { name: res.itselfDesc, colspan: '3' }
        ],
        [
          { name: '资源存储格式', colspan: '1' },
          { name: '资源存储格式', colspan: '3' }
        ],
        [
          { name: '资源标签', colspan: '1' },
          { name: res.labels, colspan: '3' }
        ],
        [
          { name: '单位', colspan: '1' },
          { name: res.ownerInfo.org, colspan: '1' },
          { name: '联系人', colspan: '1' },
          { name: res.ownerInfo.name, colspan: '1' }
        ],
        [
          { name: '联系方式', colspan: '1' },
          { name: res.ownerInfo.phone, colspan: '1' },
          { name: '邮件', colspan: '1' },
          { name: res.ownerInfo.email, colspan: '1' }
        ],
        [
          { name: '关联系统', colspan: '1' },
          { name: this.getName(this.relation_system, res.cohereSystem, true), colspan: '3' }
        ],
        [
          { name: '更新频率', colspan: '1' },
          { name: this.getName(this.update_frequency, res.updateFreq), colspan: '1' },
          { name: '安全区开放', colspan: '1' },
          { name: res.safetyArea ? '是' : '否', colspan: '1' }
        ],
        [

          { name: '开放类型', colspan: '1' },
          { name: this.getName(this.openTypeList, res.openType), colspan: '1' },
          { name: '开放条件', colspan: '1' },
          { name: this.getName(this.openCondition, res.openCondition), colspan: '1' }
        ],
        [
          { name: '共享类型', colspan: '1' },
          { name: this.getName(this.shareTypeList, res.shareType), colspan: '1' },
          { name: '是否上报省平台', colspan: '1' },
          { name: res.reportProvince ? '是' : '否', colspan: '1' }
        ],
        [
          { name: '时间范围', colspan: '1' },
          { name: res.timeRangeStart + '-' + res.timeRangeEnd, colspan: '3' }
        ],
        [
          { name: '数据范围', colspan: '1' },
          { name: this.getName(this.data_range, res.dataRange), colspan: '3' }
        ],
        [
          { name: '数据分级', colspan: '1' },
          { name: this.getName(this.data_classification, res.dataClassification), colspan: '3' }
        ],
        [
          { name: '应用场景', colspan: '1' },
          { name: this.getName(this.application_scenario, res.applicationScenario), colspan: '1' },
          { name: '提供渠道', colspan: '1' },
          { name: this.getName(this.provide_channels, res.provideChannels), colspan: '1' }
        ],
        [
          { name: '所属区域', colspan: '1' },
          { name: this.getName(this.realm, res.realm), colspan: '1' },
          { name: '电子证件照', colspan: '1' },
          { name: this.getName(this.requiredLicense, res.requiredLicense), colspan: '1' }
        ],
        [
          { name: '生成目录性质', colspan: '1' },
          { name: this.getName(this.shareNatureList, res.shareNature), colspan: '3' }
        ]
      ]
    }
  },
  async mounted() {
    // 服務詳情
    const res = await http_shop_server.read({ id: this.$route.params.id })
    this.fieldList = res.info.fields || []
    this.$nextTick(() => {
      this.$refs.multipleTable.toggleAllSelection()
    })
  },
  methods: {
    handleSubmit() {
      this.$refs.subForm.validate(async(valid) => {
        if (valid) {
          const files = this.$refs.dragRef.getFiles()
          console.log(files)
          if (files) {
            http_shop_server.create_database({
              businessId: this.$route.params.id
            }, {
              ...this.ruleForm,
              fieldCodes: this.fieldCodes.map(v => v.code),
              files
            }).then(res => {
              this.handleBack()
            })
          }
        }
      })
    },
    handleBack() {
      this.$router.back()
    },
    onSelect(options) {
      this.fieldCodes = options
    },
    getName(list, code, mult) {
      if (!list) return code
      if (mult) {
        const _list = code.map(v => {
          const find = list.find(el => el.code === v || el.value === v)
          if (find) {
            return find.name
          }
          return v
        })
        return _list.join(',')
      }
      const find = list.find(el => el.code === code || el.value === code)
      return find ? find.name : code
    }
  }
}
</script>

<style lang="scss">
.data-serve-api-page {
  background-color: #f3f5f9;
  .el-card {
    margin-bottom: 60px;
  }
  .el-card__body {
    padding: 40px;
  }
  .el-form-item__label {
    padding-bottom: 0;
  }
  .hidden-label {
    .el-form-item__label {
      visibility: hidden;
    }
  }
  .upload-demo {
    .el-upload {
      width: 100%;
    }
    .el-upload-dragger {
      width: 100%;
      height: initial;
      padding-bottom: 30px;
    }
  }
  .el-select {
    width: 100%;
    .el-input {
      width: 100%;
    }
  }
  .ctable-box {
    table {
      width: 100%;
      border-spacing: 0px;
      border: 1px solid #E5E9F2;
      border-collapse: collapse;
    }
    tr {
      height: 60px;
      border: 1px solid #E5E9F2;
    }
    .tool_baco {
      background: #f9faff;
      width: 200px;
      color: #333333;
    }
    td {
      overflow: hidden;
      color: #333333;
      border: 1px solid #E5E9F2;
      line-height: 36px;
      font-size: 18px;
      padding-left: 55px;
      text-align: left
    }
    .table_td {
      color: #333333;
    }
  }
  .content {
    width: 1400px;
    margin: 0 auto;
    .page-title {
      font-size: 30px;
      font-weight: bold;
      color: #3d72ff;
      margin: 20px 0;
    }
    h2 {
      margin-bottom: 30px;
    }
  }
  .footer {
    width: 100%;
    background: #e6ecf5;
    height: 100px;
    padding: 23px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .footer-item {
      width: 730px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .footer-text {
        font-size: 12px;
        color: #7a7a7a;
      }
    }
  }
  .header {
    width: 100%;
    background-image: url("~@/assets/shop/head.jpg");
  }
  .nav-box {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  }
  .header-content {
    width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .nav-box2 {
    width: 1400px;
    height: 350px;
    margin: 0 auto;
    .el-input,
    .el-button {
      height: 60px;
      .el-input__inner {
        height: 60px;
        line-height: 60px;
      }
    }
    .title {
      font-size: 48px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      margin-bottom: 34px;
      font-style: oblique;
    }
    .record-list {
      height: 19px;
      cursor: pointer;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 21px;
      span {
        position: relative;
        padding-right: 40px;
      }
      span::after {
        position: absolute;
        content: " ";
        height: 16px;
        width: 1px;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        margin: 0 15px;
        background-color: #ffffff;
      }
      span:last-child:after {
        display: none;
      }
    }
    .el-input-group__append,
    .el-button {
      color: #ffffff !important;
      background-color: #0052d9 !important;
      border-color: #0052d9 !important;
    }
  }
  .count-box {
    margin: 0 auto;
    width: 750px;
    .count-item {
      .count {
        font-size: 36px;
        color: #fff;
        line-height: 36px;
        text-align: center;
      }
      .count-name {
        color: #cfd6e6;
        font-size: 18px;
        margin-top: 18px;
        text-align: center;
      }
    }
  }
}
</style>
